<template>
  <div class="mapbox">
    <div ref="basicMapbox" id="map1"></div>
    <div id="info"></div>
  </div>
</template>

<script>
import Mapbox from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import {
  ScatterplotLayer,
  IconLayer,
  LineLayer,
  PathLayer,
  PolygonLayer,
  GeoJsonLayer
} from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";

var map, popup, geojson0;
const styleJson = require('../../static/style.json');

//遮罩层
const maskLayer = {
  id: "mask-layer",
  type: 'fill',
  source: {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [121.52137179756141, 31.2153298410133],
            [121.5366282024388, 31.2153298410133],
            [121.5366282024388, 31.222670016505333],
            [121.52137179756141, 31.222670016505333],
            [121.52137179756141, 31.2153298410133],
          ],
          [
            [121.525057, 31.221018],
            [121.528082, 31.221541],
            [121.531462, 31.220339],
            [121.529981, 31.216586],
            [121.524767, 31.216614],
            [121.525057, 31.221018],
          ]
        ]
      }
    }
  },
  // layout: {},
  paint: {
    'fill-color': '#000000',
    'fill-opacity': 0.8
  }
}


//layer-background
const bgLayer = {
  id: 'bg-layer',
  type: 'background',
  paint: {
    'background-color': '#000000',
    'background-opacity': 0.8
  }
}

//geo-点散图
const collectLayer = {
  id: 'collect-layer',
  type: 'circle',
  source: {
    type: 'geojson',
    data: {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          "description": "<div>这是1号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52760990726458, 31.219358305273758]
        },
        "id": "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是2号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52875562478451, 31.219218332993673]
        },
        "id": "0f04e923-c465-4050-bc78-e68f7052ab74"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是8号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.5285763628595, 31.220331440158212]
        },
        "id": "f63cd86a-234a-4062-be4b-73d5b550bca6"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是3号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52983899033053, 31.21887839945073]
        },
        "id": "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
      }, {
        "type": "Feature",
        "properties": {
          "description": "<div>这是4号楼</div>",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [121.52701756351293, 31.219844873968245]
        },
        "id": "ab1241e6-5c25-4180-8ed7-a24f206e9020"
      }]
    }
  },
  paint: {
    'circle-color': '#CC0000',
  }
}

//geo-markers
const mkgeojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "message": "Foo",
        "iconSize": [60, 60]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [121.5275202626963, 31.219718576880762]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "message": "Bar",
        "iconSize": [50, 50]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [121.5253237352661, 31.21927335709588]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "message": "Baz",
        "iconSize": [40, 40]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [121.52809289039543, 31.216783343790805]
      }
    }
  ]
}

const pointsJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        description: "这是1号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      id: "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
    },
    {
      type: "Feature",
      properties: {
        description: "这是2号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52875562478451, 31.219218332993673]
      },
      id: "0f04e923-c465-4050-bc78-e68f7052ab74"
    },
    {
      type: "Feature",
      properties: {
        description: "这是8号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.5285763628595, 31.220331440158212]
      },
      id: "f63cd86a-234a-4062-be4b-73d5b550bca6"
    },
    {
      type: "Feature",
      properties: {
        description: "这是3号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52983899033053, 31.21887839945073]
      },
      id: "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
    },
    {
      type: "Feature",
      properties: {
        description: "这是4号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52701756351293, 31.219844873968245]
      },
      id: "ab1241e6-5c25-4180-8ed7-a24f206e9020"
    }
  ]
};

const testLayer = {
  "type": "fill",
  "id": "floor-1",
  "source": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [121.4645642604869, 30.794348797404183],
              [121.46549418531447, 30.794689653973222],
              [121.46566261575902, 30.79434930386772],
              [121.46473541023101, 30.7940098927033],
              [121.4645642604869, 30.794348797404183]
            ]
          ]
        }
      }]
    }
  },
  "paint": {
    "fill-color": "rgb(255,0,0)",
    "fill-opacity": 1
  }
}


export default {
  components: {
    // MglMap
  },
  mounted() {
    this.init()
  },
  methods: {
    handleHover({ object, x, y }) {
      //mapbox-popup
      if (!object) {
        popup.remove();
        return;
      }
      const description = object["properties"]["description"];
      const coordinates = object.geometry.coordinates.slice();
      popup
        .setHTML(description)
        .setLngLat(coordinates)
        .addTo(map);
    },
    init() {
      Mapbox.accessToken = 'pk.eyJ1IjoibGFuZ2hhb2FiY2QiLCJhIjoiY2sxcjZ4aXg1MDI2MDNncWNxcHlvNDU0NyJ9.i05JLkyr2CsyJvFoMDzZmA';
      map = new Mapbox.Map(
        {
          container: this.$refs.basicMapbox,
          style: 'mapbox://styles/mapbox/light-v10',
          // style: styleJson,
          center: [121.468, 30.790],
          // center: [-74.5447, 40.6892],
          zoom: 12,
          bearing: -20,
          // minZoom: 16,
          trackResize: true,
          // dragPan: false,
          scrollZoom: { around: 'center' },
          // maxBounds: [[121.52137179756141, 31.2153298410133], [121.5366282024388, 31.222670016505333]]
        }
      )


      popup = new Mapbox.Popup({
        closeButton: false,
        closeOnClick: false,
        // className: 'text-pop'
      });

      geojson0 = new MapboxLayer({
        id: "geojson0",
        type: GeoJsonLayer,
        data: pointsJson,
        pickable: true,
        stroked: false,
        filled: true,
        getFillColor: [255, 0, 0, 255],
        getRadius: 3,
        getLineWidth: 0,
        onHover: this.handleHover.bind(this)
      });

      // mkgeojson.features.forEach((marker) => {
      //   var el = document.createElement('div');
      //   el.className = 'marker';
      //   el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
      //   el.style.width = marker.properties.iconSize[0] + 'px';
      //   el.style.height = marker.properties.iconSize[1] + 'px';

      //   el.addEventListener('click', function () {
      //     window.alert(marker.properties.message);
      //   });;


      map.on('load', () => {
        // map.addLayer(collectLayer);
        // map.addLayer(maskLayer);
        // map.addLayer(geojson0);
        // console.log(map.getBounds());

        map.addLayer({
          'id': 'wms-test-layer',
          'type': 'raster',
          'source': {
            'type': 'raster',
            'tiles': [
              'http://59.80.30.176:8089/geoserver/BACH/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=BACH:output'
              //  'https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
            ],
            'tileSize': 256
          },
          'paint': {}
        }, 'aeroway-line');
        // map.addLayer(testLayer);
        // console.log('map:' + map)
      });

      map.on('mousemove', (e) => {
        document.getElementById('info').innerHTML =       /* innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML  */
          // e.point is the x, y coordinates of the mousemove event relative
          // to the top-left corner of the map
          JSON.stringify(e.point) + '<br />' +
          // e.lngLat is the longitude, latitude geographical position of the event
          JSON.stringify(e.lngLat);  /* JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串 */

      })

      map.on('mouseenter', 'collect-layer', function (e) {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';

        var coordinates = e.features[0].geometry.coordinates.slice();
        var description = e.features[0].properties.description;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        // console.log('coordinates:' + coordinates)

        // Populate the popup and set its coordinates
        // based on the feature found.
        // .setLngLat(coordinates)
        // popup.setHTML(description)
        //   .setLngLat(coordinates)
        //   .addTo(map);
      });

      map.on('mouseleave', 'collect-layer', function () {
        map.getCanvas().style.cursor = '';
        popup.remove();
      });

      map.on('dragend', (e) => {
        console.log('bounds:' + map.getBounds());
        console.log('zoom:' + map.getZoom());
        console.log('center:' + map.getCenter());
      })

      map.on('click', (e) => {
        console.log("event:" + e)
      })

      // map.panBy([0, -25], {
      //   easing: easing
      // });


      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);

      // map.addControl(new MapboxGeocoder({
      //   accessToken: Mapbox.accessToken,
      //   mapboxgl: Mapbox
      // }));
    }
  },
  data() {
    // return {
    //   accessToken: 'pk.eyJ1IjoiamltbXkwMDkiLCJhIjoiY2swNHl2M3owMGl2bzNja2F3emk0OWxvaiJ9.cIYfwmmCkLoyQseAEI6UzQ', // your access token. Needed if you using Mapbox maps
    //   mapStyle: 'mapbox://styles/jimmy009/ck051d4fy00tj1cob1mtwxl3d',// your map style
    //   center: [121.529, 31.219],
    //   zoom: 16
    // };
    // return;
  },

  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};

</script>

<style>
@import url("https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css");
.mapbox {
  height: 100%;
  width: 100%;
}
#map1 {
  height: 100%;
}
#info {
  display: block;
  position: absolute;
  bottom: 2%;
  right: 0;
  margin: 0px auto;
  width: 50%;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #222;
  background: #fff;
}

/* .text-pop {
  background-color: rgba(0, 0, 0, 0.6);
  color: #f6f6f6;
  font-size: 12px;
  text-align: center;
  width: 100px;
  border-radius: 6px;
  padding: 10px 5px;
  position: relative;
  top: -30px;
} */
</style>